<template>
	<view class="ucenter-page">
		<view class="uc-grid ">
			<view class="uc-info-cell flex-center">
				<view class="uc-avatar"><image src="../../static/images/avatar.jpg" mode=""></image></view>
				<view class="flex_bd">
					<view class="uc-heading flex-center">
						<view class="uc-name">张某某</view>
						<image src="../../static/images/vip.png" class="icon-vip" mode=""></image>
						<image src="../../static/images/cert.png" class="icon-cert" mode=""></image>
					</view>
					<view class="uc-meta"><text>积分2000</text><text>线索100条</text></view>
				</view>
				<view class="sign-button">
					<image src="../../static/images/sign.png" mode=""></image><text>签到</text>
				</view>
			</view>
		</view>
		<view class="uc-main">
			<view class="uc-data">
				<view class="col">
					<view class="val">¥20000</view>
					<view class="text">总佣金</view>
				</view>
				<view class="col">
					<view class="val">¥20000</view>
					<view class="text">已提现</view>
				</view>
				<view class="col">
					<view class="val">¥20000</view>
					<view class="text">待提现</view>
				</view>
			</view>
			<view class="uc-invte">
				<image src="../../static/images/invte.png" class="iv-icon" mode=""></image>
				<view class="flex_bd">邀请好友注册</view>
				<view class="invte-link">
					<image src="../../static/images/pyq.png" mode=""></image>
					<image src="../../static/images/wx.png" mode=""></image>
				</view>
			</view>
			<view class="uc-cells">
				<view class="uc-nav-cell" @click="openUrl('/pages/ucenter/myInfoNotCertified')">
					<image src="../../static/images/uc1.png" class="uc-icon" mode=""></image>
					<view class="flex_bd">我的资料</view>
					<image src="../../static/images/more.png" class="arrow" mode=""></image>
				</view>
				<view class="uc-nav-cell" @click="openUrl('/pages/ucenter/myCommission')">
					<image src="../../static/images/uc2.png" class="uc-icon" mode=""></image>
					<view class="flex_bd">我的佣金</view>
					<image src="../../static/images/more.png" class="arrow" mode=""></image>
				</view>
				<view class="uc-nav-cell" @click="openUrl('/pages/ucenter/withdrawalRecord')">
					<image src="../../static/images/uc3.png" class="uc-icon" mode=""></image>
					<view class="flex_bd">提现记录</view>
					<image src="../../static/images/more.png" class="arrow" mode=""></image>
				</view>
			</view>
			<view class="uc-cells">
				<view class="uc-nav-cell" @click="openUrl('/pages/ucenter/myFriend')">
					<image src="../../static/images/uc4.png" class="uc-icon" mode=""></image>
					<view class="flex_bd">我的好友</view>
					<image src="../../static/images/more.png" class="arrow" mode=""></image>
				</view>
				<view class="uc-nav-cell" @click="openUrl('/pages/ucenter/myPoints')">
					<image src="../../static/images/uc5.png" class="uc-icon" mode=""></image>
					<view class="flex_bd">我的积分</view>
					<image src="../../static/images/more.png" class="arrow" mode=""></image>
				</view>
				<view class="uc-nav-cell"  @click="openUrl('/pages/ucenter/myRights')">
					<image src="../../static/images/uc6.png" class="uc-icon" mode=""></image>
					<view class="flex_bd">我的权益</view>
					<image src="../../static/images/more.png" class="arrow" mode=""></image>
				</view>
			</view>
			<view class="uc-cells" @click="openUrl('/pages/ucenter/feedBack')">
				<view class="uc-nav-cell">
					<image src="../../static/images/uc7.png" class="uc-icon" mode=""></image>
					<view class="flex_bd">意见反馈</view>
					<image src="../../static/images/more.png" class="arrow" mode=""></image>
				</view>
			</view>
			<view class="uc-cells">
				<view class="uc-nav-cell" @click="openUrl('/pages/ucenter/set')">
					<image src="../../static/images/uc8.png" class="uc-icon" mode=""></image>
					<view class="flex_bd">设置</view>
					<image src="../../static/images/more.png" class="arrow" mode=""></image>
				</view>
			</view>
		</view>
		<u-tabbar inactive-color="#C8C8CC" active-color="#9DC851" v-model="footcurrent" :list="tabbarlist" :mid-button="true" @change="barchange"></u-tabbar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// tab
				tabbarlist: '',
				footcurrent: 3}
		},
		onLoad() {
			this.tabbarlist = [{
					iconPath: "/static/images/foot1.png",
					selectedIconPath: "/static/images/foot1_on.png",
					text: '首页',
					isDot: false,
					customIcon: false,
					pagePath: "/pages/index/index"
				},
				{
					iconPath: "/static/images/foot2.png",
					selectedIconPath: "/static/images/foot2_on.png",
					text: '产品',
					customIcon: false,
					pagePath: "/pages/product/product"
				},
				{
					iconPath: "/static/images/middle.png",
					selectedIconPath: "/static/images/middle.png",
					midButton: true,
					customIcon: false,
					pagePath: "/pages/clue/newClue"
				},
				{
					iconPath: "/static/images/foot3.png",
					selectedIconPath: "/static/images/foot3_on.png",
					text: '线索',
					customIcon: false,
					pagePath: "/pages/clue/clue"
				},
				{
					iconPath: "/static/images/foot4.png",
					selectedIconPath: "/static/images/foot4_on.png",
					text: '我的',
					isDot: false,
					customIcon: false,
					pagePath: "/pages/ucenter/ucenter"
				},
			]
		

		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url:e
				});
			},
			barchange(e){
				if(e == 2){
					uni.navigateTo({
						url: '/pages/clue/newClue'
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	
	.uc-grid{
		height: 324rpx;
		padding: 30rpx;
		background: url(../../static/images/indexbg.jpg) no-repeat;
		.sign-button{
			width: 152rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 200rpx;
			box-shadow: 0 0 0 12rpx #b5d163;
			display:flex;
			align-items: center;
			justify-content: center;
			image{
				margin-right: 10rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
		.uc-avatar{
			margin-right: 20rpx;
			font-size: 0;
			image{
				width: 128rpx;
				height: 128rpx;
				border-radius: 128rpx;
			}
		}
		.uc-heading{
			margin-bottom: 10rpx;
			.uc-name{
				font-weight: bold;
				color: #FFFFFF;
				font-size: 44rpx;
			}
			.icon-vip{
				width: 50rpx;
				height: 50rpx;
				margin-left: 10rpx;
			}
			.icon-cert{
				width: 36rpx;
				height: 36rpx;
			}
		}
		.uc-meta{
			font-size: 24rpx;
			color: #FFFFFF;
			opacity: .8;
			text{
				margin-right: 20rpx;
			}
		}
	}
	.uc-data{
		display: flex;
		align-items: center;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
		border-radius: 20px;
		margin-bottom: 30rpx;
		.col{
			position: relative;
			flex: 1;
			text-align: center;
			.text{
				height: 36rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #9C9C9C;
				line-height: 36rpx;
			}
			.val{
				height: 50rpx;
				font-size: 36rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FE6714;
				line-height: 50rpx;
			}
			&::after{
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -20rpx;
				content: '';
				width: 2rpx;
				height: 40rpx;
				background: #EEEEEE;
			}
			&:last-child:after{
				display: none;
			}
		}
	}
	.uc-main{
		position: relative;
		z-index: 100;
		padding: 0 30rpx;
		margin-top: -116rpx;
	}
	.uc-invte{
		display: flex;
		align-items: center;
		padding: 0 28rpx;
		height: 112rpx;
		background: #FFFBF9;
		border-radius: 20rpx;
		border: 1px solid #EAE0D3;
		.iv-icon{
			display: block;
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
		.flex_bd{
			color: #957239;
			font-weight: 700;
		}
		.invte-link{
			display: flex;
			align-items: center;
			image{
				width: 56rpx;
				height: 56rpx;
				margin-left: 30rpx;
			}
		}
	}
	.uc-cells{
		padding: 10rpx 0;
		border-bottom: 1px solid #E1E1E1;
		.uc-nav-cell{
			display: flex;
			align-items: center;
			height: 100rpx;
			.uc-icon{
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}
			.arrow{
				width: 32rpx;
				height: 32rpx;
			}
			.flex_bd{
				font-weight: bold;
			}
		}
	}
	.uc-cells:last-child{
		padding-bottom: 0;
		border-bottom: 0;
	}
	
	/deep/ .u-tabbar__content__circle__button{
		width: 136rpx!important;
		height: 136rpx!important;
	}
	/deep/ .u-tabbar__content__circle__button image{
		width: 136rpx!important;
		height: 136rpx!important;
	}
	/deep/ .u-tabbar__content__circle__border{
		display: none!important;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
</style>
